.v2.getting-started-container {
  display: flex;
  justify-content: center;

  .getting-started-content {
    width: 100%;
    max-width: 688px;
    padding: 48px 12px;

    .workspace-title-container {
      color: var(--requestly-color-text-default);
      margin-bottom: 32px;
      border-radius: 4px;
      font-size: var(--requestly-font-size-sm);
      padding: var(--space-5, 12px) var(--space-9, 32px) var(--space-5, 12px) var(--space-6, 16px);
      border: 1px solid var(--requestly-color-white-t-20, rgba(255, 255, 255, 0.12));
      background: var(--requestly-color-surface-1);

      .workspace-title {
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;

        & svg {
          font-size: 1rem;
        }
      }
    }

    .lead {
      padding-left: 24px;
      margin-top: 4px;

      a {
        line-height: 150%; /* 19.5px */
        color: var(--requestly-color-primary-text, #639ff9);
        padding: 0;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .create-new-rule-container {
      .create-new-rule-title {
        font-size: 15px;
        font-weight: 500;
        line-height: 150%; /* 22.5px */
        margin-bottom: 16px;
        color: var(--requestly-color-text-default, #fff);
      }

      .create-new-rule-content {
        display: flex;
        align-items: stretch;
        gap: 32px;

        .no-rules {
          padding: 24px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 32px;
          flex: 1 0 0;
          border-radius: 8px;
          background: var(--requestly-color-surface-0, #212121);

          .empty-rules-image-container {
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 16px;

            img.empty-rules {
              width: 72px;
              height: 72px;
            }
          }
        }

        .rule-suggestions {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
          flex: 1 0 0;

          .suggested-rule-link {
            padding: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap;
            border-radius: 8px;
            width: 100%;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--requestly-color-text-subtle, #bbb);
            background: var(--requestly-color-surface-0, #212121);

            &:hover {
              background: var(--requestly-color-surface-1, #282828);
            }

            .icon {
              width: 20px;
              height: 20px;
              flex-shrink: 0;

              .rule-type-icon {
                padding: 2px;
              }
            }

            .title {
              font-size: 15px;
              font-weight: 400;
              line-height: 150%;
              font-size: 15px;
              font-weight: 400;
              line-height: 150%; /* 22.5px */
              color: var(--requestly-color-text-subtle, #bbb);
            }

            .help-icon {
              margin-left: auto;
              font-size: var(--requestly-font-size-lg, 16px);
              line-height: 16px; /* 100% */
              opacity: 0.5;
              color: var(--requestly-color-text-subtle, #bbb);
            }
          }
        }
      }
    }

    .divider.ant-divider {
      margin-top: 32px;
      margin-bottom: 16px;
    }

    .getting-started-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
      .third-party-imports {
        width: 100%;
        display: flex;
        align-items: start;
        flex-direction: column;
      }
    }

    .ask-ai-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-self: stretch;
      margin-top: 56px;

      .title {
        font-size: 15px;
        font-weight: 500;
        line-height: 150%; /* 22.5px */
        color: var(--requestly-color-text-default, #fff);
      }

      .ask-ai-btn.ant-btn.ant-btn-default {
        height: 48px;
        padding: 16px;
        border-radius: 8px;
        gap: 8px;

        .ask-ai-btn-content {
          font-size: var(--requestly-font-size-sm, 13px);
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
          border-radius: 8px;
          display: flex;
          align-items: center;
          width: 100%;
          color: var(--requestly-color-text-placeholder, #8f8f8f);

          svg {
            width: 16px;
            height: 16px;
            color: inherit;
          }
        }

        &::after {
          border-radius: 8px;
        }
      }

      .caption {
        color: var(--requestly-color-text-placeholder, #8f8f8f);
        font-size: var(--requestly-font-size-xs, 11px);
        font-weight: 400;
        line-height: 130%; /* 14.3px */
        margin-top: 8px;
      }
    }
  }
}
